<!-- 1 定义组件模版 --> 
<template>
   <div>
     介绍js的知识
     <div>
       <div class="left jsblock">
           <ol>
             <li><router-link to="/js/chapter1">第一章节</router-link></li>
             <li><router-link to="/js/chapter2">第二章节</router-link></li>
           </ol>
       </div>
 
       <div class="right jsblock">
           <router-view></router-view>
       </div>
 
     </div>
 
   </div>
 </template> 
 
 <!-- 2 定义组件逻辑 -->
 <script setup lang="ts" name="JSComponent">
 import { ref } from 'vue'
 
 </script> 
 
 
 <!-- 3 定义样式 -->
 <style scoped> .jsblock {
    display: inline-block;
 
    min-height: 400px;
    border: solid 1px red;
    vertical-align:top;
  }
 
  .left {
    width: 200px;
    margin-left: 10px
  }
 
  .right {
    width: 570px;
    margin-left: 10px;
  }
 </style>